<template>
  <div class="head">
    <ul>
      <li>
        <img src="../assets/images/itsource.jpg" alt="" />
      </li>
      <li>
        <template v-for="(item, index) in list">
          <router-link :to="item.path">
            <span :class="{text: isActive == index}">{{ item.value }}</span>
          </router-link>
        </template>
      </li>
      <li>
        <router-link to="/login">登录</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: 0,
      list: [
        {path: "/home", value: "首页"},
        {path: "/happy", value: "我们的快乐瞬间"},
        {path: "/new", value: "员工新人培训流程"},
      ],
    };
  },
  created() {
    this.getUrl(); // 可以防止刷新的时候对应菜单不高亮显示 或 第一个高亮
  },
  methods: {
    getUrl() {
      let path = this.$route.path; // 当前的路径
      let index = this.list.findIndex((item) => item.path === path); // 查找当前路由下的下标
      this.isActive = index;
      // console.log(this.isActive);
    },
  },
  watch: {
    $route: "getUrl", // 监听路由变化
  },
};
</script>

<style lang="less" scoped>
.head {
  // width: 1920px;
  height: 60px;
  background: #000000;
  opacity: 1;
  border-radius: 0px;
  display: flex;
  align-items: center;
  ul {
    margin: 0 auto;
    width: 1691px;
    height: 40px;
    // background-color: aqua;
    opacity: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    li {
      display: flex;
      a {
        color: #fff;
        text-decoration: none;
        display: inline-block;
        // width: 200px;
        text-align: center;
        position: relative;
      }
      &:nth-child(2) {
        display: flex;
        width: 600px;
        justify-content: space-between;
        // width: 1000px;
        // border: 1px solid;
      }
      img {
        width: 161px;
        height: 47px;
        opacity: 1;
        border-radius: 0px;
      }
      list-style: none;
    }
  }
}

.text::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 3px;
  border-radius: 5px;
  background: #2e86ff;
  position:absolute;
  bottom: -10px;
  left: 0px;
}
</style>
